<template>
	<div>
		<a-card style="margin-top: 12px;">
			<div>
				<a-form-model layout="horizontal" :model="form" ref="queryForm" :labelCol="{span: 6}"
					:wrapperCol="{span: 15, offset: 0}">
					<div class="fold">
						<a-row>
							<!-- :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24" -->
							<a-col :xxl="4" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="名称" prop="name">
									<a-input v-model="form.name" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="4" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="编号" prop="code">
									<a-input v-model="form.code" />
								</a-form-model-item>
							</a-col>
							<a-col :xxl="4" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="状态" prop="status">
									<a-select allowClear v-model="form.status"
										:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
										<a-select-option v-for="item in dict.status" :key="item.key"
											:value="item.value">{{item.title}}</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							<a-col :xxl="4" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="软件版本" prop="softwareVersion">
									<a-input v-model="form.softwareVersion" />
								</a-form-model-item>
							</a-col>
							<!-- <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="类型" prop="type">
									<a-select allowClear v-model="form.type"
										:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
										<a-select-option v-for="item in dict.type" :key="item.key" :value="item.value">
											{{item.title}}
										</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col> -->
							<a-col :xxl="4" :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
								<a-form-model-item label="所属城市" prop="cityId">
									<a-select allowClear show-search :filterOption="filterOption" v-model="form.cityId"
										:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}"
										@search="onCitySearch" @popupScroll="onCityPopupScroll">
										<a-select-option v-for="item in cityDataList" :key="item.key"
											:value="item.value">{{item.title}}</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row type="flex" justify="end">
							<a-button @click="submitForm" type="primary">查询</a-button>
							<a-button @click="resetForm" style="margin-left: 8px">重置</a-button>
						</a-row>
					</div>
				</a-form-model>
			</div>
		</a-card>
		<a-card style="margin-top: 12px;">
			<a-row>
				<a-col :xxl="5" :lg="5"
					:class="[isFold ? 'animation fold-tree': 'animation', isFold ? '' : 'padding-right-12']">
					<a-spin :spinning="organizationTreeLoading">
						<div>
							<a-tree-select style="width: 100%;display: block !important;" show-search
								:filterTreeNode="filterTreeNode" v-model="form.organizationId"
								:tree-default-expand-all="true" :tree-data="organizationTreeData"
								:expandedKeys.sync="organizationExpandedKeys"
								:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}"
								@change="onOrganizationIdChange">
								<template slot="title" slot-scope="item">
									<span v-if="item.type == 0">
										<a-icon type="bank" /> {{item.customTitle}}
									</span>
									<span v-else-if="item.type == 1">
										<a-icon type="shop" /> {{item.customTitle}}
									</span>
									<span v-else-if="item.type == 2">
										<a-icon type="apartment" /> {{item.customTitle}}
									</span>
									<span v-else>
										<a-icon type="question-circle" /> {{item.customTitle}}
									</span>
								</template>
							</a-tree-select>
						</div>
					</a-spin>
					<a-spin :spinning="groupTreeLoading">
						<div style="min-height: 600px;overflow-y: auto;overflow-x: hidden;">
							<a-tree :show-icon="true" :show-line="false" :tree-data="groupTreeData"
								:expandedKeys.sync="groupExpandedKeys" @select="onClickTreeNode">
								<template slot="title" slot-scope="item">
									<span v-if="item.type == 0">
										<a-icon type="bank" /> {{item.customTitle}}
									</span>
									<span v-else-if="item.type == 1">
										<a-icon type="shop" /> {{item.customTitle}}
									</span>
									<span v-else-if="item.type == 2">
										<a-icon type="apartment" /> {{item.customTitle}}
									</span>
									<span v-else>
										<a-icon type="question-circle" /> {{item.customTitle}}
									</span>
								</template>
							</a-tree>
						</div>
					</a-spin>
				</a-col>
				<a-col :xxl="19" :lg="19" :class="isFold ? 'animation fold-table': 'animation'">
					<div>
						<div>
							<a-button class="space-vertical no-margin-left" @click="foldAction">{{isFold ? `展开` : `折叠`}}
							</a-button>
							<a-dropdown>
								<a-button class="space-vertical" type="primary">终端指令
									<a-icon type="down" />
								</a-button>
								<a-menu @click="commandAction" slot="overlay">
									<a-menu-item :key="TERMINAL_COMMAND_SET_VOLUME" 
                  v-auth="`device:terminal:query`">设置音量</a-menu-item>
									<a-menu-item :key="TERMINAL_COMMAND_SET_DISPLAY_TYPE"
										v-auth="`device:terminal:query`">设置显示方式</a-menu-item>
								</a-menu>
							</a-dropdown>
							<a-dropdown>
								<a-button class="space-vertical">批量操作
									<a-icon type="down" />
								</a-button>
								<a-menu @click="batchAction" slot="overlay">
									<a-menu-item key="edit" v-auth="`device:terminal:edit`">批量编辑</a-menu-item>
									<a-menu-item key="delete" v-auth="`device:terminal:delete`">批量删除</a-menu-item>
								</a-menu>
							</a-dropdown>
							<div style="display: inline-block" v-auth="`device:terminal:import`">
								<a-button class="space-vertical" @click="showImportModal">导入</a-button>
								<input ref="inputExcel" style="display: none;" accept=".xls,.xlsx" type="file"
									:multiple="false" @change="importAnExcel" />
							</div>
							<a-button class="space-vertical" @click="exportAsExcel" v-auth="`device:terminal:export`">导出
							</a-button>
						</div>
						<standard-table ref="table" :size="`middle`" :page="page" :pageSize="pageSize" :total="total"
							:loading="loading" :columns="columns" :dataSource="dataSource"
							:selectedRows.sync="selectedRows" @onPageChange="onPageChange">
							<div slot="action" slot-scope="{text, record}">
								<a @click="showQueryModal(record.id)">
									详情
								</a>
								<a-divider class="row-btn-divider" type="vertical" />
								<a @click="showScreenshotModal(record.id)">
									截屏
								</a>
								<a-divider class="row-btn-divider" type="vertical" v-auth="`device:terminal:edit`" />
								<a @click="showEditModal(record.id)" v-auth="`device:terminal:edit`">
									编辑
								</a>
								<a-divider class="row-btn-divider" type="vertical" v-auth="`device:terminal:delete`" />
								<a @click="showDeleteModal(record.id)" v-auth="`device:terminal:delete`">
									删除
								</a>
							</div>
							<!-- <div slot="type" slot-scope="{text}">
								<span>{{text | dictFilter(dict.type)}}</span>
							</div> -->
							<div slot="diskSpace" slot-scope="{text}">
								<span>{{formatSize(text)}}</span>
							</div>
							<div slot="status" slot-scope="{text}">
								<a-tag :color="getStatusColor(text)" style="margin-right: 0 !important; width:100%">
									{{text | dictFilter(dict.status)}}
								</a-tag>
							</div>
						</standard-table>
					</div>
				</a-col>
			</a-row>
			<edit-modal ref="editModal" :visible="visibleEditModal" @cancel="hideEditModal" @ok="editSuccess" />
			<batch-edit-modal ref="batchEditModal" :visible="visibleBatchEditModal" @cancel="hideBatchEditModal"
				@ok="batchEditSuccess" />
			<query-modal ref="queryModal" :visible="visibleQueryModal" @cancel="hideQueryModal" />
			<volume-modal ref="volumeModal" :visible="visibleVolumeModal" @cancel="hideCommandModal"
				@ok="sendCommandSuccess" />
			<display-type-modal ref="displayTypeModal" :visible="visibleDisplayTypeModal" @cancel="hideCommandModal"
				@ok="sendCommandSuccess" />
			<screenshot-modal ref="screenshotModal" :visible="visibleScreenshotModal" @cancel="hideCommandModal" />
		</a-card>
	</div>
</template>

<script>
import StandardTable from "@/components/table/standard-table";
import EditModal from "./edit-modal";
import BatchEditModal from "./batch-edit-modal";
import QueryModal from "./query-modal";
import VolumeModal from "./command/volume-modal";
import DisplayTypeModal from "./command/display-type-modal";
import ScreenshotModal from "./command/screenshot-modal";
import { terminalService, commandService } from "@/services";
import CommandConstant from "@/constant/terminal-command";
import { formatSize } from "@/utils/util";
import { importEcxel, exportExcel } from "@/utils/excel-util";

const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: 50,
    scopedSlots: {
      customRender: "no",
    },
  },
  // {
  //   title: '所属机构',
  //   dataIndex: 'organizationName',
  //   width: 150
  // },
  {
    title: "名称",
    dataIndex: "name",
    width: 120,
    ellipsis: true,
  },
  {
    title: "编号",
    dataIndex: "code",
    width: 140,
    ellipsis: true,
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 80,
    align: "center",
    scopedSlots: {
      customRender: "status",
    },
  },
  // {
  // 	title: '类型',
  // 	dataIndex: 'type',
  // 	width: 80,
  // 	scopedSlots: {
  // 		customRender: 'type'
  // 	}
  // },
  {
    title: "软件版本",
    dataIndex: "softwareVersion",
    width: 80,
    ellipsis: true,
    align: "center",
  },
  {
    title: "可用存储",
    dataIndex: "diskSpace",
    width: 80,
    ellipsis: true,
    align: "center",
    scopedSlots: {
      customRender: "diskSpace",
    },
  },
  {
    title: "最后心跳时间",
    dataIndex: "heartBeatTime",
    width: 150,
  },
  // {
  //   title: '更新时间',
  //   dataIndex: 'updateTime',
  //   width: 150
  // },
  {
    title: "操作",
    width: 210,
    align: "center",
    scopedSlots: {
      customRender: "action",
    },
  },
];

export default {
  name: "Terminal",
  components: {
    StandardTable,
    EditModal,
    BatchEditModal,
    QueryModal,
    VolumeModal,
    DisplayTypeModal,
    ScreenshotModal,
  },
  data() {
    return {
      isFold: false,
      loading: false,
      confirmLoading: false,
      organizationTreeLoading: false,
      groupTreeLoading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      groupTreeData: [],
      cityTotalDataList: [],
      cityDataList: [],
      cityPageSize: 50,
      cityPage: 1,
      citySearchValue: "",
      organizationTreeData: [],
      organizationExpandedKeys: [],
      groupExpandedKeys: [],
      form: {
        //筛选条件
        name: undefined,
        code: undefined,
        softwareVersion: undefined,
        type: undefined,
        cityId: undefined,
        status: undefined,
        groupId: undefined,
      },
      dict: {
        // type: [],
        status: [],
      },
      visibleEditModal: false,
      visibleBatchEditModal: false,
      visibleQueryModal: false,
      visibleVolumeModal: false,
      visibleDisplayTypeModal: false,
      visibleScreenshotModal: false,
      TERMINAL_COMMAND_SET_VOLUME: CommandConstant.TERMINAL_COMMAND_SET_VOLUME,
      TERMINAL_COMMAND_SET_DISPLAY_TYPE:
        CommandConstant.TERMINAL_COMMAND_SET_DISPLAY_TYPE,
      TERMINAL_COMMAND_QUERY_SCREENSHOT:
        CommandConstant.TERMINAL_COMMAND_QUERY_SCREENSHOT
    };
  },
  filters: {
    dictFilter: (val, dictList) => {
      const dict = dictList.find((item) => item.value == val);
      return dict ? dict.title : "未知";
    },
  },
  computed: {
    getStatusColor() {
      return function (val) {
        switch (val) {
          case "0":
            return "#92aac3";
          case "1":
            return "#f35656";
          case "2":
            return "#70d258";
          case "3":
            return "#b796d3";
          default:
            return "#636363";
        }
      };
    },
  },
  authorize: {
    showQueryModal: "device:terminal:query",
    showEditModal: "device:terminal:edit",
    showBatchEditModal: "device:terminal:edit",
    deleteAction: "device:terminal:delete",
    showBatchDeleteModal: "device:terminal:delete",
    commandAction: "device:terminal:send",
    showImportModal: "device:terminal:import",
    exportAsExcel: "device:terminal:export",
  },
  methods: {
    formatSize,
    foldAction() {
      this.isFold = !this.isFold;
    },
    reloadTable() {
      this.selectedRows = [];
      this.page = 1;
      this.queryListAction();
    },
    resetForm() {
      this.$refs.queryForm.resetFields();
      this.reloadTable();
    },
    submitForm() {
      this.reloadTable();
    },
    showImportModal() {
      this.$refs.inputExcel.click();
    },
    importAnExcel(input) {
      var file = input.target.files[0];
      if (file) {
        importEcxel(file, (array) => {
          // console.log(array);
          const params = {
            ids: array,
          };
          return terminalService
            .importTerminal(JSON.stringify(params))
            .then((res) => {
              // console.log(res);
              const result = res.data;
              if (result.code === 200) {
                this.$message.success(result.msg);
                this.reloadTable();
              } else {
                // this.$message.warning(result.msg)
                const h = this.$createElement;
                this.$error({
                  icon: "info-circle",
                  title: "警告",
                  content: h("div", {
                    style: {
                      maxHeight: "300px",
                      overflowY: "auto",
                      paddingRight: "4px",
                    },
                    domProps: {
                      innerHTML: result.msg,
                    },
                  }),
                });
              }
            });
        });
        this.$refs.inputExcel.value = "";
      }
    },
    exportAsExcel() {
      this.confirmLoading = true;
      //有选中终端则仅导出选中部分
      const params = {
        ids: this.selectedRows.map((item) => item.id),
      };
      return terminalService
        .exportTerminal(JSON.stringify(params))
        .then((res) => {
          const result = res.data;
          if (result.code === 200) {
            this.$message.success(result.msg);
            this.selectedRows = [];
            exportExcel(result.data);
          }
        })
        .finally((this.confirmLoading = false));
    },
    showEditModal(key) {
      this.visibleEditModal = true;
      this.$refs.editModal.queryOrganizationTreeAction(
        this.form.organizationId
      );
      this.$refs.editModal.queryGroupSelectAction(this.form.organizationId);
      this.$refs.editModal.queryCitySelectAction();
      this.$refs.editModal.queryAction(key);
    },
    showBatchEditModal(keys) {
      this.visibleBatchEditModal = true;
      this.$refs.batchEditModal.form.ids = keys;
      this.$refs.batchEditModal.queryOrganizationTreeAction(
        this.form.organizationId
      );
      this.$refs.batchEditModal.queryGroupSelectAction(
        this.form.organizationId
      );
      this.$refs.batchEditModal.queryCitySelectAction();
    },
    showQueryModal(key) {
      this.visibleQueryModal = true;
      this.$refs.queryModal.setId(key);
    },
    hideEditModal() {
      this.visibleEditModal = false;
      this.$refs.editModal.$refs.form.resetFields();
    },
    hideBatchEditModal() {
      this.visibleBatchEditModal = false;
      this.$refs.batchEditModal.$refs.form.resetFields();
    },
    hideQueryModal() {
      this.visibleQueryModal = false;
    },
    hideCommandModal(val) {
      // 设置音量
      if (val === CommandConstant.TERMINAL_COMMAND_SET_VOLUME) {
        this.visibleVolumeModal = false;
        this.$refs.volumeModal.$refs.form.resetFields();
      }
      // 设置显示方式
      else if (val === CommandConstant.TERMINAL_COMMAND_SET_DISPLAY_TYPE) {
        this.visibleDisplayTypeModal = false;
        this.$refs.displayTypeModal.$refs.form.resetFields();
      }
      // 拉取截屏
      else if (val === CommandConstant.TERMINAL_COMMAND_QUERY_SCREENSHOT) {
        this.visibleScreenshotModal = false;
      }
    },
    editSuccess() {
      this.hideEditModal();
      this.reloadTable();
    },
    batchEditSuccess() {
      this.hideBatchEditModal();
      this.reloadTable();
    },
    sendCommandSuccess(val) {
      this.hideCommandModal(val);
      this.reloadTable();
    },
    deleteAction(keys) {
      this.confirmLoading = true;
      const params = {
        ids: keys,
      };
      return terminalService
        .del(JSON.stringify(params))
        .then((res) => {
          const result = res.data;
          if (result.code === 200) {
            this.$message.success(result.msg);
            this.selectedRows = [];
            this.reloadTable();
          }
        })
        .finally((this.confirmLoading = false));
    },
    batchAction(e) {
      if (this.selectedRows.length <= 0) {
        this.$message.warning("请选择记录后操作");
        return;
      }
      if (e.key === "delete") {
        this.showBatchDeleteModal();
      } else if (e.key === "edit") {
        this.showBatchEditModal(this.selectedRows.map((item) => item.id));
      }
    },
    showDeleteModal(key) {
      this.$confirm({
        confirmLoading: this.confirmLoading,
        icon: "info-circle",
        title: "警告",
        content: "你确定要删除此项吗？",
        okType: "danger",
        onOk: () => {
          this.deleteAction([key]);
        },
        onCancel() {},
      });
    },
    showBatchDeleteModal() {
      this.$confirm({
        confirmLoading: this.confirmLoading,
        icon: "info-circle",
        title: "警告",
        content: "你确定要删除所有选中项吗？",
        okType: "danger",
        onOk: () => {
          this.deleteAction(this.selectedRows.map((item) => item.id));
        },
        onCancel() {},
      });
    },
    commandAction(e) {
      if (this.selectedRows.length <= 0) {
        this.$message.warning("请选择记录后操作");
        return;
      }
      // 设置音量
      if (e.key === CommandConstant.TERMINAL_COMMAND_SET_VOLUME) {
        this.visibleVolumeModal = true;
        this.$refs.volumeModal.form.ids = this.selectedRows.map(
          (item) => item.id
        );
        this.$refs.volumeModal.queryVolumeSetting();
      }
      // 设置显示方式
      else if (e.key === CommandConstant.TERMINAL_COMMAND_SET_DISPLAY_TYPE) {
        this.visibleDisplayTypeModal = true;
        this.$refs.displayTypeModal.form.ids = this.selectedRows.map(
          (item) => item.id
        );
        this.$refs.displayTypeModal.queryDisplayTypeSetting();
      }
    },
    showScreenshotModal(id) {
      this.visibleScreenshotModal = true;
      this.$refs.screenshotModal.form.id = id;
      this.$refs.screenshotModal.refresh();
    },
    onPageChange(pagination) {
      this.page = pagination.current;
      this.pageSize = pagination.pageSize;
      this.queryListAction();
    },
    onOrganizationIdChange(val) {
      this.form.organizationId = val;
      this.form.groupId = undefined;
      this.queryGroupAction();
      this.reloadTable();
    },
    onClickTreeNode(selectedKeys) {
      this.form.groupId = selectedKeys[0];
      this.reloadTable();
    },
    onCitySearch(input) {
      this.citySearchValue = input;
      if (!input) {
        this.queryCitySelectAction();
      } else {
        this.cityDataList = [];
        this.cityPage = 1;
        let newCityData = [];
        this.cityTotalDataList.forEach((item, index) => {
          if (item.title.indexOf(input) >= 0) {
            newCityData.push(item);
          }
        });
        this.cityDataList = [
          ...this.cityDataList,
          ...newCityData.slice(0, this.cityPageSize),
        ];
      }
    },
    onCityPopupScroll(e) {
      const { scrollHeight, scrollTop, clientHeight } = e.target;
      // 下拉框不下拉的时候
      if (scrollHeight === 0 && clientHeight === 0) {
        this.cityPage = 1;
      } else {
        // 当下拉框滚动条到达底部的时候
        if (scrollHeight - scrollTop === clientHeight) {
          this.cityPage += 1;
          // 获取当前页码
          let cityPage = this.cityPage;
          let newCityData = [];
          // 得到需要开始拼接的数据下标
          let cursorStart = (cityPage - 1) * this.cityPageSize;
          // 得到需要结束拼接的数据下标
          let cursorEnd = cityPage * this.cityPageSize;
          // 判断是否有搜索
          if (this.citySearchValue) {
            let temp = [];
            this.cityTotalDataList.forEach((item, index) => {
              if (item.title.indexOf(this.citySearchValue) >= 0) {
                temp.push(item);
              }
            });
            temp.forEach((item, index) => {
              if (index >= cursorStart && index < cursorEnd) {
                newCityData.push(item);
              }
            });
          } else {
            this.cityTotalDataList.forEach((item, index) => {
              if (index >= cursorStart && index < cursorEnd) {
                newCityData.push(item);
              }
            });
          }
          // 将新增的数据赋值到要显示的数组中
          this.cityDataList = [...this.cityDataList, ...newCityData];
        }
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0;
    },
    filterTreeNode(input, treeNode) {
      return treeNode.data.props.customTitle.includes(input);
    },
    queryListAction() {
      this.loading = true;
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        queryParams: this.form,
      };
      terminalService
        .queryList(JSON.stringify(params))
        .then((res) => {
          const result = res.data;
          if (result.code === 200) {
            this.dataSource = [];
            this.dataSource = result.data.records;
            this.total = result.data.totalCount;
          }
        })
        .finally((this.loading = false));
    },
    queryGroupAction() {
      this.groupTreeLoading = true;
      const params = {
        organizationId: this.form.organizationId,
      };
      terminalService
        .queryGroupTree(JSON.stringify(params))
        .then((res) => {
          const result = res.data;
          if (result.code === 200) {
            this.groupTreeData = result.data;
            this.groupExpandedKeys = [];
            this.expandAllTreeNode(this.groupTreeData, this.groupExpandedKeys);
          }
        })
        .finally((this.groupTreeLoading = false));
    },
    queryCitySelectAction() {
      terminalService
        .queryCitySelect()
        .then((res) => {
          const result = res.data;
          if (result.code === 200) {
            let tempCityDataList = result.data;
            if (tempCityDataList && tempCityDataList.length > 0) {
              this.cityTotalDataList = tempCityDataList;
              this.cityDataList = tempCityDataList.slice(0, this.cityPageSize);
            }
          }
        })
        .finally();
    },
    queryOrganizationAction() {
      this.organizationTreeLoading = true;
      terminalService
        .queryOrganizationTree()
        .then((res) => {
          const result = res.data;
          if (result.code === 200) {
            this.organizationTreeData = result.data;
            this.organizationExpandedKeys = [];
            if (
              this.organizationTreeData &&
              this.organizationTreeData.length > 0
            ) {
              this.expandAllTreeNode(
                this.organizationTreeData,
                this.organizationExpandedKeys
              );
              this.form.organizationId = result.data[0].key;
              this.queryGroupAction();
              this.reloadTable();
            }
          }
        })
        .finally((this.organizationTreeLoading = false));
    },
    expandAllTreeNode(originData, targetData) {
      originData.forEach((item) => {
        targetData.push(item.key);
        if (item.children && item.children.length > 0) {
          this.expandAllTreeNode(item.children, targetData);
        }
      });
    },
  },
  activated() {
    if (this.$route.query && this.$route.query.status) {
      this.form.status = this.$route.query.status;
      this.reloadTable();
      if (this.$route.query && this.$route.query.status) {
        let newQuery = JSON.parse(JSON.stringify(this.$route.query));
        delete newQuery.status;
        this.$router.replace({
          query: newQuery,
        });
      }
    }
  },
  created() {
    // this.getDict(
    //   JSON.stringify({
    //     code: "TERMINAL_TYPE",
    //   })
    // ).then((res) => (this.dict.type = res.data.data));
    this.getDict(
      JSON.stringify({
        code: "TERMINAL_STATUS",
      })
    ).then((res) => (this.dict.status = res.data.data));
    this.queryOrganizationAction();
    this.queryCitySelectAction();
  },
};
</script>
<style scoped lang="less">
.ant-form-item {
  margin-bottom: 12px;
}

.fold {
  width: calc(100% - 12px);
  display: inline-block;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}

.animation {
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.fold-tree {
  width: 0%;
}

.fold-table {
  width: 100%;
}

/deep/.ant-select {
  display: inline-table !important;
  overflow-x: hidden !important;
}

.overflow-modal {
  max-height: 100px;
  overflow-y: auto;
}
</style>
